<template>
    <div class="bg-orange-300 px-[100px]">
        <el-carousel height="300px">
            <el-carousel-item >
                <img style="width: 100%;height:100%;" src="../assets/1.jpg" fit="cover" />
            </el-carousel-item>
            <el-carousel-item >
                <img style="width: 100%;height:100%;" src="../assets/2.jpg" fit="cover" />
            </el-carousel-item>
            <el-carousel-item >
                <img style="width: 100%;height:100%;" src="../assets/3.png" fit="cover" />
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="flex-1 flex flex-col mx-[100px] mt-4">
        <div class="font-semibold">团购活动</div>
        <div class="flex flex-wrap mt-4 mx-[-10px]">
            <div v-for="item in ruleList" class="w-[120px] px-[10px]" @click="gotoDetail(item.goodsId)">
                <el-image style="width: 100px; height: 100px" :src="item.goodsImg" fit="cover" />
                <div>
                    <div class="text-lg">
                        {{ item.goodsName }} * {{ item.goodsNum }}
                    </div>
                    <!-- <div class="font-semibold"><span class="text-lg text-orange-600">￥{{ item.goodsPrice }}</span><span
                            class="text-sm">/{{ item.goodsSpec }}</span></div> -->
                </div>
            </div>

        </div>
    </div>
    <div class="flex-1 flex flex-col mx-[100px]  mt-4">
        <div class="font-semibold">精选商品</div>
        <div class="flex flex-wrap mt-4 mx-[-20px]">
            <GoodsItem class="w-[240px] px-[20px]" v-for="item in goodsList" :price="item.goodsPrice"
                :name="item.goodsName" :img="item.goodsImg" :spec="item.goodsSpec" @click="gotoDetail(item.id)">
            </GoodsItem>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'


import GoodsItem from '@/components/GoodsItem.vue'
import { onMounted, ref } from 'vue'
import { getGoodsList } from '@/apis/goods'
import { getGroupRuleList } from '@/apis/group'

const route = useRoute()
const router = useRouter()
const goodsList = ref([])
const getGoods = async () => {
    const res = await getGoodsList({
        pageNum: 1,
        pageSize: 1000
    })
    goodsList.value = res.list
}
const ruleList = ref([])
const getRules = async () => {
    const res = await getGroupRuleList({
        pageNum: 1,
        pageSize: 1000
    })
    ruleList.value = res.list
}
const gotoDetail = (goodsId) => {
    router.push({
        name: 'GoodsDetail',
        query: {
            id: goodsId
        }
    })
}
onMounted(() => {
    getGoods()
    getRules()
})
</script>

<style scoped></style>
